<template>
  <div class="recommenduser_item" v-if="isShow">
    <a
      href="javascript:;"
      class="recommenduser_item_close"
      @click="closeClickHandle"
      ><i class="icon-close"></i
    ></a>
    <ItemImgHead :item="item" :isBigHead="isBigHead"></ItemImgHead>
    <router-link
      :to="{ name: 'USER', params: { usid: item.userId } }"
      class="recommenduser_item_nickname"
    >
      <span>{{ item.nickName }}</span>
    </router-link>
    <router-link
      :to="{ name: 'POSITION', params: { position: item.position } }"
      class="recommenduser_item_position"
    >
      <i class="icon-map"></i><span>{{ item.position }}</span>
    </router-link>
    <FollowButton></FollowButton>
  </div>
</template>
<script>
export default {
  name: "RecommendUserItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    isBigHead: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName:"itemImgHead" */ "../../components/common/itemImgHead.vue"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:"followButton" */ "../../components/common/followButton.vue"
      ),
  },
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    closeClickHandle() {
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.recommenduser_item {
  position: relative;
  border: 1 / @base solid #efefef;
  border-radius: 5 / @base;
  width: 120 / @base;
  padding: 20 / @base 10 / @base;
  margin: 0 10 / @base 0 0;
  a {
    &.recommenduser_item_close {
      position: absolute;
      top: 10 / @base;
      right: 10 / @base;
      font-size: 16 / @base;
    }
    &.recommenduser_item_nickname {
      display: block;
      margin: 5 / @base 0;
    }
    &.recommenduser_item_position {
      display: block;
      margin: 5 / @base 0;
      i {
        vertical-align: middle;
        font-size: 16 / @base;
      }
    }
  }
}
</style>
